import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ModalService } from '@iux/live';

@Component({
  templateUrl: './update.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UpdateComponent {
  constructor(private modalService: ModalService) {}

  contentComponent = ModalCustomComponent;
  contentUploadComponent = CustomUploadComponent;

  open() {
    this.modalService.create({
      lvModalKey: 'my-modal',
      lvWidth: 600,
      lvHeader: 'Modal Title',
      lvContent: this.contentComponent,
      lvComponentParams: {
        title: 'This is transfer parameter',
      },
      lvFooter: [
        {
          id: 'cancel',
          label: 'Cancel',
          onClick: modal => {
            modal.close();
          },
        },
        {
          id: 'update',
          label: 'Update',
          type: 'primary',
          onClick: () => {
            this.update();
          },
        },
      ],
    });
  }

  update() {
    this.modalService.update('my-modal', {
      lvWidth: 400,
      lvHeader: 'Update',
      lvContent: this.contentUploadComponent,
      lvComponentParams: {
        title: 'Update transfer parameter',
      },
      lvKeyboardEscape: true,
      lvFooter: [],
      lvOk: modal =>
        new Promise<void>(resolve => {
          modal.getModalElement().querySelector('h1').innerHTML = 'Parameter changed!';
          setTimeout(() => {
            resolve();
          }, 2000);
        }),
    });
  }
}

@Component({
  selector: 'modal-custom-component',
  template: `
    <div>
      <h1>{{ title }}</h1>
      <div>
        <p>Modal instance in component</p>
        <p>Modal instance in component</p>
        <p>Modal instance in component</p>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModalCustomComponent {
  @Input() title = '';
}

@Component({
  selector: 'custom-upload-component',
  template: `
    <div>
      <h1>{{ title }}</h1>
      <div>
        <p>This is new component</p>
        <p>This is new component</p>
        <p>This is new component</p>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomUploadComponent {
  @Input() title = '';
}
